
import React, { useState, useEffect } from 'react';
import { MenuFoldOutlined, MenuUnfoldOutlined, } from '@ant-design/icons';
import { Link, useLocation } from 'react-router-dom';
import { Outlet,useNavigate,} from 'react-router-dom';
import { Layout, Menu, theme } from 'antd';
import('./index.less')
import { getMenuApi } from '../../apis/menu';
import DropDown from '../../components/dropDown';
import BreadCrumb from '../../components/breadCrumb';
const { Header, Sider, Content } = Layout;
//侧边栏约束
interface MenusFromServer {
  map: any;
  path: string,
  name: string,
  children?: MenusFromServer[],
  icon?: string
}
interface MenusItem {
  title: string,
  label: string,
  key: string,
  children?: MenusItem[],
  icon?: React.ReactElement
}
export default function index() {
  const navigate = useNavigate()
  const [collapsed, setCollapsed] = useState(false);
  const { token: { colorBgContainer }, } = theme.useToken();
  //获取头像及名称信息
  const { username, avatar } = JSON.parse(localStorage.userInfo);
  //图片基础链接
  const baseImgUrl = 'http://xawn.f3322.net:8002/distremote/static/avatar/'
  const [menus, setMenus] = useState([])
  function getMenus(username: string) {
    getMenuApi(username).then(res => {
      setMenus(handleMenus2(res[0].children))
    })
  }
  // 处理侧边栏
  function handleMenus2(menus: MenusFromServer) {
    return menus.map((item: any) => {
      const o: MenusItem = {
        title: item.name,
        label: item.name,
        key: "/nav" + item.path,
      }
      if (item.children) {
        o.children = handleMenus2(item.children);
      }
      if (item.icon) {
        o.icon = <i className={'iconfont iconfont-' + item.icon} />;
      }
      return o;
    })
  }
  const { pathname } = useLocation()
  //点击菜单
  function clickMenu(params: any) {
    const [path, titleKey] = params.keyPath;
    
    navigate(path)
  }
  //发接口
  useEffect(() => {
    //获取
    getMenus(username)
  }, [])
  return (
    <Layout className='container'>
      <Sider trigger={null} collapsible collapsed={collapsed} className="Side">
        <div className="logo">
          <img src="http://xawn.f3322.net:8002/distremote/static/img/logo.png" alt="" />
          {
            !collapsed && <h1>赤兔养车</h1>
          }
        </div>
        <Menu
          theme="dark"
          mode="inline"
          defaultSelectedKeys={['1']}
          onClick={clickMenu}
          items={menus}
        />
      </Sider>
      <Layout className="site-layout">
        <Header style={{ padding: '5px 0 0 20px', background: colorBgContainer }} className="header">
          {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
            className: 'trigger',
            onClick: () => setCollapsed(!collapsed),
          })}
         <DropDown/>
        </Header>
        <Content
          className='Content'
          style={{
            margin: '24px 16px',
            padding: 24,
            minHeight: 280,
            background: colorBgContainer,
          }}
        >
          <BreadCrumb></BreadCrumb>
          
          <Outlet/>
        </Content>
      </Layout>
    </Layout>
  )
}
